<template>
  <div style="padding:30px">
    <a-wrap
      ref="wrap"
      :service="service"
      :form-config="formConfig"
      :search-config="searchConfig"
      :table-config="tableConfig"
      @todo="todo"
    >
      <template #name="{row}">
        <el-tag>{{row.name}}</el-tag>
      </template>
    </a-wrap>
  </div>
</template>

<script>
import MockUserService from "../src/api/MockUserService";
export default {
  data() {
    return {
      service: MockUserService,
      searchConfig: {
        labelWidth: '120px',
        customAdd: false, // 自定义寻增
        queryList: [
          {
            prop: 'name',
            label: '姓名',
            component: 'el-input',
          },
          {
            prop: 'sex',
            label: '性别',
            component: 'el-select',
            options: MockUserService.querySex(),
            // 默认是 label和value,不用写下面的配置
            optionsKeys: {
              label: 'dictLabel',
              value: 'dictValue'
            }
          }
        ]
      },
      formConfig: {
        props: {
          labelWidth: '120px',
        },
        list: [
          {
            prop: 'name',
            label: '姓名',
            component: 'el-input',
            required: true
          },
          {
            prop: 'email',
            label: '邮箱',
            component: 'el-input',
            // 内置了大部分校验，如需自定义可在 a-wrap的index 文件中添加
            rules: 'email',
            required: true
          },
          {
            prop: 'sex',
            label: '性别',
            component: 'el-select',
            options: MockUserService.querySex(),
            optionsKeys: {
              label: 'dictLabel',
              value: 'dictValue'
            }
          },
          {
            prop: 'height',
            label: '身高',
            component: 'el-input-number',
            required: true,
          },
          {
            prop: 'age',
            label: '年龄',
            component: 'el-input',
          }
        ]
      },
      tableConfig: {
        columns: [
          {
            label: '姓名',
            prop: 'name',
            display: {
              slotName:'name'
            }
          },
          //两种方式
          {
            label: '性别',
            prop: 'sex',
            options: MockUserService.querySex(),
          },
          {
            label: '年龄',
            prop: 'age',
          },
          {
            label: '邮箱',
            prop: 'email',
            display: {
              component: 'el-tag'
            }
          },
          {
            label: '性别',
            prop: 'sex',
            display: {
              func: (e => {
                return this.getSex(e)
              }),
              component: 'el-tag'
            }

          },
          {
            label: '身高',
            prop: 'height',
          }
        ],
        // 操作  内置 默认的 info  edit delete , 两种格式  字符串 info 或者 对象
        operation: ['info', {
          key: 'info',
          label: '自定义详情',
          custom: true
        }, 'edit', 'delete', {
          key: 'custom',
          label: '自定义',
          custom: true
        }],
        operationWidth: '250px',
      },

    }
  },
  created() {
    console.log('1111:', MockUserService.querySex())
  },
  computed: {
    getSex(e) {
      // const obj = this.add.orderTypes.find(i =>{return i.dictValue === e})
      // return obj?.dictLabel
      return function (e) {
        if (e == 0) return '男'
        if (e == 1) return '女'
      }

    },
  },
  methods: {
    todo(type, e) {
      alert(`检测到自定义方法，【${type}】参数：【${JSON.stringify(e)}】`)
    }
  }
}
</script>


<style scoped>

</style>
